<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.1.3/axios.js"></script>
    <script>
        // axios方法
        axios({ url: 'http://ajax-api.itheima.net/api/category/top' })
            .then(res => {
                console.log(res)
                res.data.data.map((el) => {
                    return axios({ url: 'http://ajax-api.itheima.net/api/category/sub?id=' + el.id })
                        .then(res => console.log(res))
                })
            })

        // xhr方法
        const xhr = new XMLHttpRequest()
        xhr.open('GET', 'http://ajax-api.itheima.net/api/category/top')
        xhr.send()
        xhr.responseType = 'json'
        xhr.onreadystatechange = () => {
            if (xhr.readyState === 4) {
                if (xhr.status === 200) {
                    console.log(xhr.response)
                    xhr.response.data.map((el) => {
                        const xhr1 = new XMLHttpRequest()
                        xhr1.open('GET', 'http://ajax-api.itheima.net/api/category/sub?id=' + el.id)
                        xhr1.send()
                        xhr1.responseType = 'json'
                        xhr1.onreadystatechange = () => {
                            if (xhr1.readyState === 4) {
                                if (xhr1.status === 200) {
                                    console.log(xhr1.response)
                                }
                            }
                        }
                    })
                }
            }
        }
        //fetch方法
        fetch('http://ajax-api.itheima.net/api/category/top')
            .then(res => res.json())
            .then(res => {
                console.log(res)
                return res.data.map((item) => {
                    return fetch(
                        `http://ajax-api.itheima.net/api/category/sub?id=${item.id}`
                    ).then((res) => res.json());
                })
            })
            .then(res => {
                console.log(res)
                Promise.all(res).then(res => console.log(res))
            })
        // async方法
        async function getByasync() {
            const a1 = await fetch('http://ajax-api.itheima.net/api/category/top')
            console.log(a1)
            const a2 = await a1.json()
            console.log(a2)
            const a3 = a2.data
            console.log(a3)
            const a4 = a3.map((item) => {
                return fetch(`http://ajax-api.itheima.net/api/category/sub?id=${item.id}`)
                    .then(res => res.json())
            })
            console.log(a4)
            const a5 = await Promise.all(a4)
            console.log(a5)
        }
        getByasync()






        
    </script>
</body>

</html>